<template lang="pug">
  transition(name="packetbounce")
    .red-package-base(v-if="isShow")
      .close(@click="close()")
        img(:src="closeIcon")
      .red-package
        img.avatar(:src="packet.pic")
        .name {{packet.nickname}}
        .tips 发了一个红包,价值连城
        br
        .titile {{packet.desc}}
        br
        img.open(:src="packetOpenIcon",@click="openPacket()")
</template>

<script>
import packetOpenIcon from '../assets/packet/red-packet-open.png'
import closeIcon from '../assets/packet/close.svg'

export default {
  name: 'PacketHandler',
  props: ['packet'],
  data () {
    return {
      packetOpenIcon: packetOpenIcon,
      closeIcon: closeIcon,
      isShow: false
    }
  },
  methods: {
    open () {
      this.isShow = true
    },
    close () {
      this.isShow = false
    },
    openPacket () {
      this.isShow = false
      this.$router.push({name: 'RedPacketDetail', query: {red_envlope_id: this.packet.id}})
    }
  }
}
</script>

<style lang="sass">
@import '../styles/color.sass';
@import '../styles/animate.css';
.red-package-base
  background: $alpha-black
  position: fixed
  left: 0
  top: 0
  width: 100%
  height: 100%
  z-index: 1000
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  .close
    width: 40px
    height: 40px
    padding: 5px
    border-radius: 50%
    background: $alpha-black
    position: fixed
    right: 7%
    top: 20px
    img
      width: 30px
      height: 30px
  .red-package
    width: 86%
    height: 60%
    background: url(../assets/packet/red-packet-bg.png) no-repeat
    background-size: 100% 100%
    display: flex
    padding-bottom: 16%
    border-radius: 6px
    flex-direction: column
    justify-content: center
    align-items: center
    color: $yellow
    line-height: 1.5em
    img.avatar
      width: 50px
      height: 50px
      border-radius: 50%
      margin-bottom: 10px
    .name
      font-size: .9em
    .tips
      font-size: .9em
    .title
      font-size: 3em
    img.open
      margin-top: 15px
      width: 80px
      height: 80px
</style>
